<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<style>
  .signle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 2px solid #e3e3e3;
    border-radius: 12px;
    padding: 10px 50px;
  }

  h2 {
    margin: 8px;
    font-size: 22px;
  }

  .button-box {
    display: flex;
    align-items: center;
  }

  .button-box .signle-button+.signle-button {
    margin-left: 20px;
  }

  .signle-button {
    position: relative;
    padding: 0 12px;
    height: 36px;
    border: 1px solid #e6e6e6;
    background-color: #f9f9f9;
    border-radius: 8px;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: #222;
  }

  .signle-button input[type='file'] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1000;
  }

  .upload-progress {
    display: flex;
    align-items: center;
    margin: 8px 0;
    min-width: 230px;
  }

  .upload-progress>span {
    font-size: 14px;
    color: #222;
  }

  .upload-progress .progress-container {
    position: relative;
    width: 100px;
    height: 4px;
    border-radius: 2em;
    background-color: #eee;
    margin: 0 6px;
  }

  .upload-progress .progress-container .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    border-radius: 2em;
    background-color: #2ead2e;
  }

  .preview-box {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 160px;
    min-width: 100px;
    min-height: 100px;
    padding: 6px;
    border-radius: 8px;
    border: 1px dashed #e3e3e3;
    margin-top: 8px;
  }

  .preview-img {
    max-width: 100%;
  }
</style>

<body>
  <div class="signle-wrap">
    <h2>图片单张上传</h2>
    <div class="upload-progress">
      <span>当前进度</span>
      <div class="progress-container">
        <span class="progress"></span>
      </div>
      <span class="progress-number">0%</span>
    </div>
    <div class="button-box">
      <div class="signle-button">
        <!-- <input type="file" id="signle" onchange="signleUpload(this)"> -->
        <input type="file" id="signle" />
        <span>选择本地文件</span>
      </div>
      <!-- <div class="signle-button" onclick="clearSignle()">
        <span>清空已选图片</span>
      </div> -->
    </div>
    <div class="preview-box" draggable="true">
      <img class="preview-img" />
    </div>
  </div>
  <script src="./singleUpload.js"></script>
  <script>

    // 单张图片点击上传
    const singleUpload = new SingleUpload({ el: '#signle', url: 'http://localhost:3000/upload/single' });

    singleUpload.events.subscribe('upload:success', function (data) {
      console.warn('upload:success -->', data);
      singleUploadSuccess = true;
      signleUploadProgress = false;
    });

    singleUpload.events.subscribe('upload:error', function (data) {
      console.warn('upload:error -->', data);
      singleUploadSuccess = true;
      signleUploadProgress = false;
    });

    singleUpload.events.subscribe('upload:progress:success', function ({ percent }) {
      console.warn(percent);
      signleUploadProgress = true;
      $(".signle-wrap .progress-number").html(percent); //设置进度显示百分比
      $(".signle-wrap .progress").css("width", percent); //设置完成的进度条宽度
    });
    // 单张图片点击上传


    // 单张图片拖拽上传
    // function preventDefault(e) {
    //   e.preventDefault();
    //   return true;
    // }

    // const previewBox = document.getElementsByClassName('preview-box')[0];
    // previewBox.addEventListener('dragenter', ev => preventDefault(ev));
    // previewBox.addEventListener('dragover', ev => preventDefault(ev));
    // previewBox.addEventListener('drop', ev => {
    //   ev.stopPropagation();
    //   ev.preventDefault();
    //   console.warn(ev);
    //   const files = [];
    //   [].forEach.call(ev.dataTransfer.files, function (file) {
    //     files.push(file);
    //   }, false);
    //   console.log(files);

    //   signleUpload({ files });
    //   return false;
    // })
    // 单张图片拖拽上传
  </script>
</body>

</html>